<!--
 * @FileDescription: 首页
 * @Author: zhiwen527@126.com
 * @Date: 2021/04/12
 -->
<template>
	<view class="index">
		<!-- 自定义标题 -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="head_box">
			<!-- <cu-custom :isTitle="true">
				<block slot="backText">
					<text class="nav-title">{{ "聚抖国际" }}</text>
				</block>
			</cu-custom> -->
			<view class="indexTips" v-if="smallRoutine">
				添加到我的小程序，下次使用更方便
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<!-- <view class="head_box">
			<cu-custom :isTitle="true">
				<block slot="backText">
					<text class="nav-title">{{ "聚抖国际" }}</text>
				</block>
			</cu-custom>
		</view> -->
		<!-- #endif -->
		<view class="top-images-view">
			<image :src="indexTopImages" mode="widthFix"></image>
		</view>
		<view class="banner-view">
			<!-- 轮播 -->
			<Banner :detail="banner" v-if="banner.length > 0"></Banner>
			<!-- 滚动新闻 -->
			<view class="interval"></view>
			<uni-notice-bar scrollable="true" single="false" :speed="30" showIcon="true" :text="singNew.info">
			</uni-notice-bar>
		</view>

		<!-- 内容区 -->
		<view class="content_box home_content_box">
			<!-- 菜单 -->
			<Menu :list="menus" v-if="menus.length > 0"></Menu>
			<!-- 首页活动 -->
			<view class="index-bg-view">

				<view class="adverts" v-for="(item, index) in adverts" :key="index">

					<view class="adverts__row" v-if="item.activityType == 3">
						<image :src="item.imageArr[0]" mode="widthFix" />
					</view>
					<view class="adverts__row" v-if="item.activityType == 4">
						<image :src="item.imageArr[0]" mode="widthFix" @click="seckill(item.seckillPate)" />
					</view>
					<view class="adverts__row" v-if="item.activityType == 5">
						<image :src="item.imageArr[0]" mode="widthFix"
							@click="luckDrawModal(item.luckDrawPate,item.luckDrawId)" />
					</view>
					<view class="adverts__row" v-if="item.activityType == 6">
						<image :src="item.imageArr[0]" mode="widthFix" @click="seckill(item.mallPath)" />
					</view>
					<view class="adverts__row" v-if="item.activityType == 2">
						<view class="time" v-if="rebateState == 2">
							<text class="styleAll" v-if="isDay === true">{{ day }}</text>
							<text class="timeTxt">:</text>
							<text class="styleAll">{{ hour }}</text>
							<text class="timeTxt">:</text>
							<text class="styleAll">{{ minute }}</text>
							<text class="timeTxt">:</text>
							<text class="styleAll">{{ second }}</text>
						</view>
						<image :src="item.imageArr[0]" mode="widthFix"
							@click="Rebate(item.rebatePate,{id:item.rebateId})" />
					</view>
					<view class="adverts__row" v-if="item.activityType == 1">
						<image :src="item.imageArr[0]" mode="widthFix"
							@click="goSpecial(item.specialPate,item.specialClassId,item.name,item.load_index_img,item.isParalyse)" />
					</view>
				</view>
				<!-- activityType=0的图片 -->
				<view class="adverts">
					<view class="adverts__row morePiece" >
						<image :src="itemImg.imageArr[0]" v-for="(itemImg,imgIndex) in typeList" :key="imgIndex"  mode="widthFix"  @click="goGoodsConIndex(itemImg.productId,itemImg.id)" />
					</view>
				</view>
				<!-- #ifdef H5 -->
				<view class="footer__text">
					<text @click="keepOnRecord">粤ICP备19136691号</text>
				</view>
				<!-- #endif -->
			</view>
			<!-- 直播 -->
			<!-- #ifdef MP-WEIXIN -->
			<!-- <Live :detail="live"></Live> -->
			<!-- #endif -->
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<!-- 客服按钮 -->
		<button class="customer-service" open-type="contact">
			<image :src="customerServiceIcon" mode="widthFix" />
		</button>
		<official-account></official-account>
		<!-- #endif -->
		<view class="forbiddenTips" v-if="userInfo.status == false">
			您的账户已被禁用，具体原因请联系客服咨询，账号禁用期间部分功能将无法正常使用
		</view>
		<!-- 弹出框 -->
		<view class="indexEject" v-for="(item, index) in yshopHomeEject" :key="index" v-if="EjectShowModal">
			<view class="indexEjectView">
				<view class="cancelIcon" @click="cancelIcon">
					<image src="https://h5.ylsp.vip/file/static/cancelIcon.png" mode="" />
				</view>
				<image :src="item.pic" mode="" v-if="item.ejectType == 3"
					@click="Rebate(item.pagePath,{id:item.rebateId})" />
				<image :src="item.imageArr[0]" mode="" v-if="item.ejectType == 1"
					@click="seckillClick(item.pagePath)" />
				<image :src="item.imageArr[0]" mode="" v-if="item.ejectType == 2" @click="indexnotice()" />
				<image :src="item.imageArr[0]" mode="" v-if="item.ejectType == 4" @click="indexLive(item.liveId)" />
				<image :src="item.imageArr[0]" mode="" v-if="item.ejectType == 0"
					@click="specialClick(item.name,item.pagePath,item.is_show,item.specialId,item.imageArr[1])" />
			</view>
		</view>
		<view class="indexEjectBg" v-if="EjectShowModal"></view>
	</view>
</template>
<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from "vuex";
	import Menu from "@/components/Menu";
	import UniNoticeBar from "@/components/uni-notice-bar/uni-notice-bar";
	import Banner from "./components/Banner";
	import {
		getHomeData,
		getShare
	} from "@/api/public";
	import {
		getCurrentDate
	} from "@/api/public";
	import {
		systemPromptIndex
	} from "@/utils";
	import cookie from "@/utils/store/cookie";
	const HAS_COUPON_WINDOW = "has_coupon_window";
	export default {
		name: "Index",
		components: {
			UniNoticeBar,
			Menu,
			Banner,
		},
		props: {},
		data: function() {
			return {
				banner: [],
				menus: [],
				roll: [],
				adverts: [],
				// activityType=0的产品图片
				typeList:[],
				yshopHomeEject: [],
				EjectShowModal: false,
				HomeEjectShow: true,
				rebateState: 1, // 推三返一活动状态，(1)未开始、(2)进行中、(3)已结束
				info: {
					fastList: [],
					bastBanner: [],
				},
				smallRoutine: false,
				count: "", //倒计时
				seckillStartTime: '',
				seckillEndTime: '',
				customerServiceIcon: '',
				isDay: true,
				day: "0",
				hour: "00",
				minute: "00",
				second: "00",
				datatime: 0,
				intDateTime: 0,
				indexTopImages: '',
			};
		},
		onShow: function() {
			this.lodINdexDataShow()
			if (this._route.query.spread) {
				let urlSpread = this._route.query.spread
				cookie.set("spread", urlSpread)
			}
			this.indexTopImages = this.$store.getters.indexTopImages
		},
		computed: {
			...mapGetters(['userInfo','token']),
			singNew() {
				return this.roll.length > 0 ? this.roll[0] : "你还没添加通知哦！";
			},
		},
		onLoad: function() {
			// this.getLocation();
			let that = this;
			uni.showLoading({
				title: "加载中",
			});
			// #ifdef MP-WEIXIN
			this.closeTips()
			//#endif
		},
		onPullDownRefresh() {
			let that = this;
			that.lodINdexDataShow()
			uni.stopPullDownRefresh();
		},
		methods: {
			// ...mapActions(["getLocation"]),
			onShareTimeline: function() {
				return {
					title: this.miniHomeRemark,
					imageUrl: this.miniHomeImg,
					path: "pages/home/index?spread=" + uni.getStorageSync("uid"),
				};
			},
			closeTips() {
				this.smallRoutine = true
				const TIME_COUNT = 5;
				if (!this.timer) {
					this.count = TIME_COUNT;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
						} else {
							this.smallRoutine = false
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000)
				}
			},
			cancelIcon() {
				this.EjectShowModal = false
				this.HomeEjectShow = false
			},
			lodINdexDataShow() {
				let that = this;
				getHomeData().then((res) => {
					that.seckillStartTime = Date.parse(res.data.seckillStartTime)
					that.seckillEndTime = Date.parse(res.data.seckillEndTime)
					if (that.datatime == 0) {
						that.rebateState = 3
						that.datatime = res.data.rebateTime
					} else {
						if (that.datatime == res.data.rebateTime) {} else {
							that.datatime = res.data.rebateTime
						}
					}
					if (that.datatime != 0) {
						that.newDate();
					}
					that.customerServiceIcon = res.data.seckillImagesPath;
					that.$set(that, "banner", res.data.banner);
					that.$set(that, "menus", res.data.menus);
					this.typeList=[]
					const residue=[]					
					const adverts=res.data.adverts||[]
					for(let i=0;i<adverts.length;i++){
						const el=adverts[i]
						if(el.activityType==0){
							this.typeList.push(el)
						}else{
							residue.push(el)
						}
					}
					that.$set(that, "adverts", residue);
					that.$set(that, "yshopHomeEject", res.data.yshopHomeEject);
					that.$set(that, "roll", res.data.roll);
					that.$set(that, "info", res.data.info);
					if (that.HomeEjectShow) {
						if (that.yshopHomeEject.length > 0) {
							that.EjectShowModal = true
						} else {
							that.EjectShowModal = false
						}
					}
					uni.hideLoading();
					that.setOpenShare();
				});
			},
			goGoodSearch() {
				this.$yrouter.push("/pages/shop/GoodSearch/index");
			},
			Rebate(path, parmas) {
				if (this.rebateState == 3) {
					systemPromptIndex()
					return
				}
				this.$yrouter.push({
					path: path,
					query: parmas
				});
			},
			customer_service() {
				this.$yrouter.push({
					path: '/pages/stemService/index'
				});

			},
			seckillClick(path) {
				this.$yrouter.push({
					path: path
				});
			},

			luckDrawModal(path, id) {
				this.$yrouter.push({
					path: path,
					query: {
						id: id
					}
				});
			},
			indexnotice() {
				this.EjectShowModal = false,
					this.HomeEjectShow = false
			},
			// #ifdef H5
			keepOnRecord() {
				window.open('http://beian.miit.gov.cn')
			},
			//#endif
			indexLive(id) {
				wx.navigateTo({
					url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${id}`
				});
			},
			goGoodsConIndex(id, advertsid) {
				if (advertsid == 266) {
					if (this.userInfo.level <= 0) {
						uni.showModal({
							title: '提示',
							content: '您账户等级为' + this.userInfo.vipName + ',无法领取此产品',
							success: function(res) {
								if (res.confirm) {} else if (res.cancel) {}
							}
						});
						return
					}
				}
				if(id==64){
					// 免费
				}
				this.$yrouter.push({
					path: "/pages/shop/GoodsCon/index",
					query: {
						id: id,
					},
				});
			},
			customerService() {
				this.$yrouter.push({
					path: "/pages/customerService/index",
					query: {
						uid: this.userInfo.uid,
						nickname: this.userInfo.nickname,
						avatar: this.userInfo.avatar,
						phone: this.userInfo.phone,
						vipName: this.userInfo.vipName,
					},
				});
			},
			goSpecial(pate, classId, name, image, status) {
				let _status = status
				if (_status == 0) {
					systemPromptIndex()
					return
				}
				this.$yrouter.push({
					path: pate,
					query: {
						classId: classId,
						specialName: name,
						image: image
					},
				});
			},
			specialClick(name, path, status, id, image) {
				if (status == 0) {
					systemPromptIndex()
					return
				}
				this.$yrouter.push({
					path: path,
					query: {
						classId: id,
						specialName: name,
						image: image
					},
				});
			},
			seckill(pate) {
				this.$yrouter.push({
					path: pate
				});
			},
			onShareAppMessage: function() {
				return {
					title: this.miniHomeRemark,
					imageUrl: this.miniHomeImg,
					path: "pages/home/index?spread=" + uni.getStorageSync("uid"),
				};
			},
			setOpenShare: function() {
				if (this.$deviceType == "weixin") {
					getShare().then((res) => {
						var data = res.data.data;
						var configAppMessage = {
							desc: data.synopsis,
							title: data.title,
							link: location.href,
							imgUrl: data.img,
						};
						this.openShareAll(configAppMessage);
					});
				}
			},
			show_time: function() {
				let that = this;
				that.runTimeIndex = setInterval(() => {
					//时间函数
					let intDiff = that.intDateTime; //获取数据中的时间戳的时间差；
					let day = 0,
						hour = 0,
						minute = 0,
						second = 0;
					if (intDiff > 0) {
						//转换时间
						if (that.isDay === true) {
							day = Math.floor(intDiff / (60 * 60 * 24));
						} else {
							day = 0;
						}
						hour = Math.floor(intDiff / (60 * 60)) - day * 24;
						minute = Math.floor(intDiff / 60) - day * 24 * 60 - hour * 60;
						second =
							Math.floor(intDiff) -
							day * 24 * 60 * 60 -
							hour * 60 * 60 -
							minute * 60;
						if (hour <= 9) hour = "0" + hour;
						if (minute <= 9) minute = "0" + minute;
						if (second <= 9) second = "0" + second;
						that.day = day;
						that.hour = hour;
						that.minute = minute;
						that.second = second;
					} else {
						that.day = "0";
						that.hour = "0";
						that.minute = "0";
						that.second = "0";
						clearInterval(this.runTimeIndex)
						clearInterval(this.newDateServerIndex)
						that.rebateState = 3
					}
				}, 1000)
			},

			questionnaire() {
				this.$yrouter.push({
					path: '/pagesB/view/questionnaire/index',
					query: {
						type: 3,
					},
				});
			},


			newDate() {
				let that = this;
				getCurrentDate().then((res) => {
						that.intDateTime = that.datatime / 1000 - res.data / 1000;
						if (that.intDateTime <= 0) {
							that.rebateState = 3
						} else {
							console.log("查看定时器")
							console.log(that.runTimeIndex)
							console.log(that.newDateServerIndex)
							if (that.runTimeIndex != undefined || that.newDateServerIndex != undefined) {
								clearInterval(this.runTimeIndex)
								clearInterval(this.newDateServerIndex)
							} else {
								console.log("定时器已清除")
							}
							console.log("执行倒计时")
							that.rebateState = 2
							that.newDateServerIndex = setInterval(() => {
								that.intDateTime = that.intDateTime - 1
							}, 1000)
							that.show_time()
						}
					})
					.catch(err => {})
			},
		}
	};
</script>
<style lang="less">
	.content_box {
		// background-image: url(https://h5.ylsp.vip/file/static/bgimages.png);
		background-size: 100%;
	}

	.footer__text {
		height: 80rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		text-align: center;
	}

	.index {
		// background-color: #fff;
		/* #ifdef H5 */
		padding-top: 94rpx;
		padding-bottom: 50px;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		//padding-top: 140rpx;
		/* #endif */
		overflow-y: auto;

		.top-images-view {
			overflow: hidden;
			width: 100%;

			image {
				width: 100%;
			}
		}

		.banner-view {
			margin-top: -185rpx;
			padding: 0 30rpx;

			.interval {
				height: 10rpx;
			}
		}

		.indexTips {
			position: absolute;
			bottom: -200rpx;
			right: 10rpx;
			height: 50rpx;
			background-color: rgba(0, 0, 0, 0.8);
			color: #FFFFFF;
			font-size: 24rpx;
			padding: 0 30rpx;
			line-height: 50rpx;
			width: auto;
			display: inline-block;
			border-radius: 10rpx;
			z-index: 100;
		}

		.indexTips:after {
			content: "";
			border: 20rpx solid transparent;
			border-bottom-color: rgba(0, 0, 0, 0.8);
			position: absolute;
			top: 0;
			right: 115rpx;
			margin-top: -37rpx;
		}

		.forbiddenTips {
			position: fixed;
			top: 140rpx;
			background: #fffbe8;
			padding: 30rpx;
			z-index: 100;
			color: #ff3334;
		}

		.indexEjectBg {
			position: fixed;
			height: 100%;
			width: 100%;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.6);
			z-index: 9;
		}


		.indexEject {
			width: 500rpx;
			height: 600rpx;
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			margin: auto;
			z-index: 10;

			.indexEjectView {
				height: 100%;
				width: 100%;
				position: relative;

				.cancelIcon {
					height: 70rpx;
					width: 70rpx;
					position: absolute;
					top: -30rpx;
					right: -30rpx;
					border-radius: 100%;
					overflow: hidden;
					background: #555;
					border: #555 solid 5rpx;
					z-index: 11;

					image {
						width: 100%;
						height: 100%;
					}
				}

				image {
					width: 100%;
					height: 100%;
				}
			}

		}
	}

	.seckill {
		position: relative;
		height: 330rpx;
		width: 330rpx;
		float: right;

		.seckillState {
			position: absolute;
			top: 20rpx;
			left: 30rpx;
			display: inline-block;
			background-color: rgba(0, 0, 0, 0.7);
			color: #FFFFFF;
			padding: 8rpx 15rpx;
			border-radius: 50rpx;
			z-index: 10;

			image {
				height: 35rpx;
				width: 35rpx;
				margin-bottom: 0;
				float: left;
			}

			text {
				font-size: 24rpx;
				margin-left: 8rpx;
				float: left;
			}
		}

		image {
			height: 100%;
			width: 100%;
		}
	}

	.rebate {
		position: relative;
		height: 330rpx;
		width: 330rpx;
		float: left;



		image {
			height: 100%;
			width: 100%;
		}
	}

	.swiper-item {
		height: 100%;
	}

	.index-bg-box {
		width: 100%;

		image {
			width: 100%;
		}
	}

	.index-bg-view {
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;

		.index-bg-view-row {
			width: 100%;
			overflow: hidden;
			margin-bottom: 20rpx;
		}

		image {
			width: 100%;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
		}

		.adverts {
			.adverts__row {
				width: 100%;
				overflow: hidden;
				position: relative;

				.time {
					position: absolute;
					top: 50rpx;
					right: 70rpx;
					z-index: 10;

					.styleAll {
						background-color: #000000;
						color: #FFFFFF;
						padding: 0 10rpx;
						border-radius: 10rpx;
						font-size: 30rpx;
					}

					.timeTxt {
						padding: 0 5rpx;
						color: #000000;
						font-size: 30rpx;
					}
				}
			}

			.morePiece {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				image {
					width: calc((100% / 2) - 10rpx);
					height: 350rpx !important;
					margin: 20rpx 0;
				}

				image:nth-child(2n) {
					margin: 0 0 0 15rpx;
				}
			}
		}
	}

	.fixed-header {
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		right: 0;
		background: #fff;
		box-shadow: 0 0 20rpx -10rpx #aaa;

		&+.fixed-header-box {
			height: 98rpx;
		}
	}

	.head_box {
		width: 750rpx;
		background-color: #FFFFFF;
		transition: all linear 0.3s;
		position: fixed;
		top: 0;
		z-index: 100;

		:v-deep.cuIcon-back {
			display: none;
		}

		.indexLogo {
			width: 360rpx;
		}

		.nav-title {
			font-size: 38rpx;
			font-family: PingFang SC;
			font-weight: 900;
			color: #000000;
			margin-left: 50rpx;
			line-height: 40px;
		}
	}

	.cu-bar.fixed {
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 1024;
	}

	.cu-bar {
		box-sizing: border-box;

		.index .header {
			height: 64rpx;

		}
	}

	.header-search {
		transition: all linear 0.3s;
	}

	.cu-bar .action {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		align-items: center;
		height: 100%;
		max-height: 100%;

		&:first-child {
			margin-left: 15px;
			font-size: 15px;
		}
	}

	.home_content_box {
		margin-top: -10rpx;
	}

	.customer-service {
		height: 80rpx;
		width: 80rpx;
		position: fixed;
		padding: 0;
		bottom: 100rpx;
		border: none;
		background: none;
		right: 30rpx;
		-webkit-border-radius: 100%;
		border-radius: 100%;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>